<template>
  <el-form :inline="true" :model="queryPermissionForm" class="demo-form-inline">
    <el-form-item label="所属菜单:">
      <el-select
        v-model="queryPermissionForm.id"
        clearable
        placeholder="请选择菜单"
        style="width: 240px"
      >
        <el-option v-for="item in menuList" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
    </el-form-item>

    <el-form-item label="名称:">
      <el-input
        v-model="queryPermissionForm.name"
        placeholder="请输入权限名称"
        clearable
        style="width: 200px"
      />
    </el-form-item>

    <el-form-item label="路径:">
      <el-input
        v-model="queryPermissionForm.path"
        placeholder="请输入权限路径"
        clearable
        style="width: 200px"
      />
    </el-form-item>

    <el-form-item label="方法:">
      <el-input
        v-model="queryPermissionForm.path"
        placeholder="请输入权限方法"
        clearable
        style="width: 200px"
      />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="querySubmit">查询</el-button>
    </el-form-item>
  </el-form>

  <div class="table-header">
    <span class="table-title">权限列表</span>
    <el-button
      type="primary"
      @click="addPermissionDialogAction"
      v-if="actions.includes('addPermission')"
      >添加</el-button
    >
  </div>
  <el-table :data="tableData">
    <el-table-column prop="menu_name" label="所属菜单" />
    <el-table-column prop="name" label="权限名称" />
    <el-table-column prop="path" label="权限路径" />
    <el-table-column prop="action" label="操作key" />
    <el-table-column prop="method" label="请求方法" />
  </el-table>

  <el-dialog v-model="addPermissionDialog" title="添加权限" width="500">
    <el-form :model="addPermissionForm">
      <el-form-item label="所属菜单" :label-width="formLabelWidth">
        <el-select v-model="addPermissionForm.menu_id" clearable placeholder="请选择菜单">
          <el-option v-for="item in menuList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="操作名称" :label-width="formLabelWidth">
        <el-input v-model="addPermissionForm.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="操作key" :label-width="formLabelWidth">
        <el-input v-model="addPermissionForm.action" autocomplete="off" />
      </el-form-item>
      <el-form-item label="路径" :label-width="formLabelWidth">
        <el-input v-model="addPermissionForm.path" autocomplete="off" />
      </el-form-item>
      <el-form-item label="方法" :label-width="formLabelWidth">
        <el-select v-model="addPermissionForm.method">
          <el-option
            v-for="item in methodList"
            :key="item.value"
            :label="item.value"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addPermissionDialog = false">取消</el-button>
        <el-button type="primary" @click="fetchAddPermission"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
  
  <script lang="ts" setup>
import { addPermission, listPermission } from '@/api/permission'
import { listMenu } from '@/api/menu'
import { reactive, onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { actions } from '@/api/auth'

const addPermissionDialog = ref(false)
const initPermissionForm = reactive({
  id: '',
  name: '',
  path: '',
  action: '',
  method: '',
  menu_id: ''
})
const addPermissionForm = reactive({ ...initPermissionForm })
const formLabelWidth = '140px'
const tableData = ref([])
const parentMenuList = ref([])
const menuList = ref([])
const queryPermissionForm = reactive({
  ...initPermissionForm
})

const methodList = reactive([
  {
    value: 'GET'
  },
  {
    value: 'POST'
  },
  {
    value: 'PUT'
  },
  {
    value: 'DELETE'
  }
])

const addPermissionDialogAction = async () => {
  addPermissionDialog.value = true
  try {
    const res = await listMenu({ page: 1, size: 10, level: 2 })
    if (res && res.data) {
      menuList.value = res.data.data
    }
  } catch (error) {}
}

const fetchListMenu = async (params: {
  parent_uuid?: string
  name?: string
  isParent?: boolean
  page: number
  size: number
}) => {
  try {
    const filteredParams = Object.fromEntries(
      Object.entries(params).filter(([key, value]) => value !== undefined && value !== '')
    )
    const res = await listMenu(filteredParams)
    return res
  } catch (error) {
    console.error('Failed to fetch user list:', error)
  }
}

const fetchAddPermission = async (params: {}) => {
  try {
    const res = await addPermission(addPermissionForm)
    if (res.status < 300) {
      ElMessage.success('添加权限成功')
      addPermissionDialog.value = false
      Object.assign(addPermissionForm, initPermissionForm) //重置表单内容，不然会显示上次的内容
    } else {
      ElMessage.error('添加权限失败')
    }
  } catch (error) {
    console.error('Failed to add user:', error)
  }
}

const fetchListPermission = async (query: {}) => {
  try {
    const res = await listPermission(query)
    return res
  } catch (error) {}
}

onMounted(async () => {
  try {
    const res = await fetchListPermission({ page: 1, size: 10 })
    if (res.status < 300) {
      tableData.value = res.data.data
    }
  } catch (error) {}
})
</script>
  
  <style scoped>
.pagination-container {
  display: flex;
  justify-content: flex-end; /* 右对齐 */
  margin-top: 25px; /* 添加顶部间距 */
}
.demo-form-inline {
  margin-bottom: 20px;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.table-title {
  font-size: 18px;
  font-weight: bold;
}
</style>